<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Pex Ton Geek</title>
<link href='style01.css' rel='stylesheet' type='text/css' media='screen' />
<link href='http://fonts.googleapis.com/css?family=Quantico' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready( function () {
    // On cache les sous-menus :
    $(".menu_gauche ul.menu_gauche_sub").hide();
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"
    // et on remplace l'élément span qu'ils contiennent par un lien :
    $(".menu_gauche li.menu_gauche_toggle span").each( function () {
        // On stocke le contenu du span :
        var TexteSpan = $(this).text();
        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;

    // On modifie l'évènement "click" sur les liens dans les items de liste
    // qui portent la classe "toggleSubMenu" :
    $(".menu_gauche li.menu_gauche_toggle > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.menu_gauche_sub:visible").length != 0) {
            $(this).next("ul.menu_gauche_sub").slideUp("normal");
        }
        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
        else {
            $(".menu_gauche ul.menu_gauche_sub").slideUp("normal");
            $(this).next("ul.menu_gauche_sub").slideDown("normal");
        }
        // On empêche le navigateur de suivre le lien :
        return false;
    });    


} ) ;
</script>  

</head>
<body>

	<div class="site">
		<div class="header">
			P3X ToN G€€K
		</div>
		<div class="content">
			<table class="menu_haut">
				<tr>
					<td>
						Accueil | A propos
					</td>
					<td class="menu_connexion">
						<input type="text" value="login"/> <input type="password" value="password"/> <button>Connexion</button>
					</td>
				</tr>
				<tr>
					<td></td>
					<td class="menu_connexion_oublipass">Inscription | Identifiant/mot de passe oublié ?</td>
				</tr>
			</table>
			<table class="content_table">
				<tr>
					<td>
						<ul class="menu_gauche">
							<li class="menu_gauche_toggle"><a href="#"><span>Le Geek</span></a>
								<ul class="menu_gauche_sub">
									<li><a href="#">Info n°1</a></li>
									<li><a href="#">Info n°2</a></li>
								</ul>
							</li>
							<li><a href="#"><span>Item 2</span></a></li>
							<li><a href="#"><span>Item 3</span></a></li>
							<li><a href="#"><span>Item 4</span></a></li>
						</ul>
					</td>
					
					<td class="centre">
						<div class="centre_contenu">
						
							<center>Bonjour et bienvenue sur Pex Ton G€€K !</center>
	
							<br />Pex ton geek est un jeu en ligne par navigateur. Le principe est simple : élever un Geek. Il vous faudra l'aimer, le nourrir et bien évidement, le faire devenir le plus grand des Geek !
							
							<br />
							<br />Pour vous inscrire, rendez vous sur la page <b>Inscription</b>. 
						</div>
					</td>
				</tr>
				<tr>
					<td></td>
					<td class="actu">
						Titre de l'actu
						<br />Blablabla
					</td>
				</tr>
				
				<tr>
					<td></td>
					<td class="actu_pages">
						Suivant | Précédent
					</td>
				</tr>
			</table>
			
		</div>
		<div class="footer">
			&copy; 2012 - Pex ton geek
			<br />Aurel | Maks | Sylvain
			<br />Conditions générales
		</div>
	</div>

</body>
</html>